<div class="row">
    <!-- Risk Rating -->
    <div *ngIf="meiType !== 'IdiosyncraticIssue'" class="col-md-6">
        <div class="header subgroupHeader">
            ESG Risk Rating
        </div>
        <div *ngIf="currentClusterCode" style="margin-top:10px;">            
            <span class="rrscore">{{riskRating ? riskRating.toFixed(1) : 0}}</span>/100 &nbsp; <b>{{currentClusterName}} Risk</b>
            <div intervalChart [chartID]="'intervalChart'" [clusters]="riskClusters" [companyCode]="currentClusterCode" style="position: relative">                        
                <div id="intervalChart"></div>
                <div id='intervalChartAxis' style="height: 20px;margin-top: -20px;"></div>                         
            </div>
        </div>
    </div>
    <!-- Risk Framework -->
    <div class="col-md-6">
        <div class="header subgroupHeader">
            Risk Framework
        </div>
        <div style="margin-top: 10px;">
            <h4 class="rating">&nbsp;</h4>
        </div>
        <div exposureChart [chartID]="'frameworkchart'" [chartData]="riskFramework">
            <div class="row">
                <div class="col-sm-6">
                    <div id='exposurecategories' class="exposurecategories">
                        <div *ngFor="let category of riskFramework; let last = last;" class="row exposure-row">
                            <div class="col-sm-9 text-right category-cell" style="padding-right: 0px;">
                                {{ category.name }}
                            </div>
                            <div class="col-sm-3 text-right category-cell" [ngClass]="{'boldText': last}">
                                {{ category.labelValue.toFixed(1) }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6" style="padding-left: 0px;">
                    <div id='frameworkchart' class="exposurechart"></div>
                </div>
            </div>
        </div>
    </div>
    <div *ngIf="meiType == 'IdiosyncraticIssue'" class="col-md-6">
        <div class="header subgroupHeader">&nbsp;</div>
        <div style="margin-top: 10px;">
            <h4 class="rating">&nbsp;</h4>
        </div>
        <p>An idiosyncratic issue is an issue that was not initially deemed material at the subindustry level but becomes a
            material ESG issue for a company based on the occurrence of a Category 4 or 5 event. Idiosyncratic issues are
            represented only by the respective event indicator.</p>
    </div>
</div>

<div *ngIf="(meiType == 'MaterialIssue' && riskIssueExposure) || (meiType == 'BaselineIssue') || (riskManagement)" class="row summary-text">
    <!-- Issue Risk Exposure - not shown for baseline -->
    <div *ngIf="meiType === 'MaterialIssue' && riskIssueExposure" class="col-md-6">
        <div class="header subgroupHeader">Issue Risk Exposure</div>
        <div style="margin-top: 10px;">
            <h4 class="rating">&nbsp;</h4>
        </div>
        <div exposureChart [chartID]="'issueexposurechart'" [chartData]="riskIssueExposure">
            <div class="row">
                <div class="col-sm-8">
                    <div id='exposurecategories' class="exposurecategories">
                        <div *ngFor="let category of riskIssueExposure; let last = last;" class="row exposure-row">
                            <div class="col-sm-9 text-right category-cell" style="padding-right: 0px;">
                                {{ category.description }}
                            </div>
                            <div class="col-sm-3 text-right category-cell" [ngClass]="{'boldText': last}">
                                {{ category.labelValue }}
                            </div>
                        </div>
                        <div *ngFor="let issue of riskIssueExposureSummary;let last = last;" class="row exposure-row">
                            <div class="col-sm-9 text-right category-cell" style="padding-right: 0px;">
                                {{ issue.name }}
                            </div>
                            <div class="col-sm-3 text-right category-cell" [ngClass]="{'boldText': last}">
                                {{ issue.value }}
                            </div>
                        </div>

                    </div>
                </div>
                <div class="col-sm-4" style="padding-left: 0px;">
                    <div id='issueexposurechart' class="exposurechart"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- Baseline Desc -->
    <div *ngIf="meiType === 'BaselineIssue'" class="col-md-6" style="padding-left: 0px">
        Sustainalytics assesses governance-related risks and opportunities by determining the extent to which a company's governance
        practices detract from or add to the company's ability to execute on its business strategy. Sustainalytics' Corporate
        Governance Research evaluates the governance structures, practices, and behaviors of a company and its ability to
        build sustainable, long-term value that can be delivered to shareholders and other stakeholders in a fair and transparent
        manner.
    </div>
    <!-- Management -->
    <div *ngIf="riskManagement && meiType !== 'IdiosyncraticIssue'" class="col-md-6">
        <div class="header subgroupHeader">Management</div>
        <div style="margin-top: 10px;">
            <h4 class="rating">&nbsp;</h4>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div id='exposurecategories' class="exposurecategories">
                    <div *ngFor="let category of riskManagement; let last = last;" class="row exposure-row">
                        <div class="col-sm-9 text-right category-cell" style="padding-right: 0px;">
                            {{ category.name }}
                        </div>
                        <div class="col-sm-3 text-right category-cell" [ngClass]="{'boldText': last}">
                            {{ category.labelValue.toFixed(1) }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6" style="padding-left: 0px;">
                <div barChart [chartID]="'managementchart'" [chartData]="riskManagement" [showCategoryNames]="false">
                    <div id='managementchart' class="managementchart"></div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <hr class="thin" />
                <p *ngIf="manageablePercent" class="small">
                    {{ manageablePercent }} of the total issue risk exposure is manageable. As such, the management score is applied to this
                    {{ manageablePercent }} of the issue risk exposure
                </p>
            </div>
        </div>
    </div>
</div>

<div *ngIf="lastUpdate" class="small">
    Last update: <b>{{lastUpdate | date: 'MMM dd, yyyy'}}</b>
</div>